<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>用户角色管理</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script>
layui.use(['table','form'], function(){
	  var table = layui.table;
	  var form = layui.form;
//执行一个 table 实例
	table.render({
	  elem: '#test'
	  ,height: 'full-80'
	  ,url: 'list' //数据接口
	  ,even:true
	  ,title: '组织表'
	  ,cellMinWidth:100 
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
		{type: 'checkbox', fixed: 'left'}
	    ,{field: 'osgid', title: 'ID', sort: true, fixed: 'left'}
	    ,{field: 'ostage', title: '组织名称'}
	    ,{field: 'detail', title: '组织职务描述'}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	  ]
		]
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'getCheckData':
	        var data = checkStatus.data;
	        layer.alert(JSON.stringify(data));
	      break;
	      case 'getCheckLength':
	        var data = checkStatus.data;
	        layer.msg('选中了：'+ data.length + ' 个');
	      break;
	      case 'isAll':
	        layer.msg(checkStatus.isAll ? '全选': '未全选');
	      break;
	    };
	  });
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'del'){
	    	layer.confirm('是否删除数据',{icon:3,title:"确认"}, function(index){
	      	  	layui.$.ajax({
	                url:"delete",
	                type:"POST",
	                data:{"id":data.osgid},
	                dataType: "json",                
	                success: function(data){
	                	if(data==null){
	                		layer.msg("删除失败", {icon: 5});    
	                	}else{
	                		layer.msg(data.osgid);
	                		obj.del();//删除这一行
	                        layer.close(index);//关闭弹框
	                        layer.msg("删除成功", {icon: 6}); 
	                	}
	                },
	                error:function(){
	              	  layer.closeAll();
	                    parent.location.reload();;//调用父级的layer来关闭弹窗
	                    Load(); //删除完需要加载数据
	                },
	      	  	});
	    	});
	    } else if(obj.event === 'edit'){
			form.val("formTest",data);
			layer.open({
				type:1,
				title:'修改用户',
				area:'800px',
				anim: 1,
				skin: 'layui-layer-molv',
				content:layui.$('#update'),	
			});
	    }
	  });
});
</script>
<form id="update" class="layui-form layui-form-pane" action="update" lay-filter="formTest" method="post" hidden="true" style="height:400px">
 	<div class="layui-form-item">
 	<label class="layui-form-label">用户id</label>
	    <div class="layui-input-block">
	      <input type="text" name="osgid" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	</div>
	 <div class="layui-form-item">
    <label class="layui-form-label">用户角色</label>
	    <div class="layui-input-block">
	      <input type="text" name="ostage" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>   
  <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <input type="text" name="detail" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
</html>